<template>
    <div class="store">
        <div class="content-activity">
            <van-swipe :autoplay="3000" indicator-color="" class="swipe">
                <van-swipe-item v-for="item,index in swipeImgUrls" :key="index">
                    <a :href="item.aurl">
                        <img :src="item.url">
                    </a>
                    <div class="clearboth"></div>
                </van-swipe-item>
            </van-swipe>
        </div>

        <div class="search-wrapper">
            <van-search :placeholder="storeNamePlaceHolder" v-model="storeName"
                        show-action
                        @search="fetchBySearcheName"
            >
                <div slot="action" @click="fetchBySearcheName">搜索</div>
            </van-search>
        </div>
        <div class="select-wrapper">
            <div class="select-item">
                <van-row type="flex" justify="space-between">
                    <van-col span="10">
                        <div class="text-wrapper" @click="changeSelectType('yetai')">
                            <span>业态 <van-icon class="icon-wrapper" name="arrow-down"/></span>
                        </div>
                    </van-col>
                    <van-col span="10">
                        <div class="text-wrapper" @click="changeSelectType('floor')">
                            <span>位置 <van-icon class="icon-wrapper" name="arrow-down"/></span>
                        </div>
                    </van-col>
                </van-row>
            </div>
            <transition name="fade" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut"
                        :duration="100">
                <div class="select-panel" v-show="showSelectPanel">
                    <div class="option-wrapper">
                        <ul>
                            <li v-for="item,index in option" :key="index"
                                @click="selectOptions(item.code,selectItemType)">
                                {{item.value}}
                            </li>
                        </ul>
                    </div>
                </div>
            </transition>
        </div>

        <div class="store-list-wrapper">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    :finished-text="finishedText"
                    @load="onLoad">
                <div class="store-list">
                    <div class="store-item" v-for="(item,key) in storeListCom" :key="key"
                         @click="openStoreDetail(item)">
                        <!--v-lazy=""-->
                        <div class="img-wrapper" ref="imgWrapper">
                            <img class="store-pics" v-show="item.storePic" :src="item.storePic">
                        </div>
                        <div class="info">
                            <van-row>
                                <van-col span="4">
                                    <!--:src="item.logo" v-lazy="item.logo"-->
                                    <img class="logo" :src="item.logo">
                                </van-col>
                                <van-col span="20">
                                    <div class="store-name">{{item.storeName}}</div>
                                </van-col>
                            </van-row>
                            <div class="floor-station">地址：{{item.floor}} {{item.station}}</div>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {mapState, mapGetters, mapMutations} from 'vuex'
    import {Lazyload} from 'vant'
    import animate from 'animate.css'
    import {isDev, getScaleHeightByRate} from "../../utils/tools";

    Vue.use(Lazyload)
    const FINISHED_TEXT = ['没有更多了', '暂无记录']
    export default {
        name: "Store",
        data() {
            return {
                pageNo: 1,
                pageSize: 20,
                storeName: '',
                categoryCode: '',//业态类型
                floor: '',//楼层
                showSelectPanel: false,
                selectItemType: null, // yetai / floor
                beenSelectItemsType: null,
                yetaiOptions: [],
                floorOptions: [],
                storeList: [],
                loading: false,
                finished: false,
                finishedText: FINISHED_TEXT[0],
                /*轮播图片*/
                swipeImgUrls: []
            }
        },
        created() {
            this.storeName = this.$store.state.app.storeName
            this.SET_STORE_NAME(null)
            this.fetchFloorOptions()
            this.fetchYetaiOptions()
            this.fetchStoreList()
            this.showAD()
        },
        mounted() {

        },
        watch: {
            // storeList: {
            //     handler: function (value) {
            //         if (value.length > 0) {
            //             this._suiteImgWrapper()
            //         }
            //     },
            //     deep: true
            // }
        },
        computed: {
            ...mapGetters(['storeNamePlaceHolder']),
            option() {
                let options = [{id: -999, name: "", type: "businessType", code: "-999", value: '全部'}]
                if (this.selectItemType === 'yetai') {
                    options = options.concat(this.yetaiOptions)
                } else if (this.selectItemType === 'floor') {
                    options = options.concat(this.floorOptions)
                } else {
                    this.showSelectPanel = false
                    return []
                }
                return options;
            },
            storeListCom() {
                return this.storeList.map(item => {
                    if (item.storePics && item.storePics.length > 0) {
                        let storePics = item.storePics.split(',')
                        item.storePic = storePics[0]
                    } else {
                        item.storePic = ''
                    }
                    return item;
                })
            }
        },
        methods: {
            ...mapMutations(['SET_STORE_NAME']),
            fetchStoreList() {
                // this._suiteImgWrapper()
                this.$api.store.storeList({
                    pageNo: this.pageNo,
                    pageSize: this.pageSize,
                    categoryCode: this.categoryCode,
                    floor: this.floor,
                    storeName: this.storeName
                }).then(res => {
                    if (res.code == 0) {
                        let page = res.data
                        let list = page.list
                        this.loading = false;
                        this.finishedText = FINISHED_TEXT[0]
                        if (page.totalPage == 0) {
                            this.finishedText = FINISHED_TEXT[1]
                            this.storeList = []
                            this.finished = true;
                            return
                        } else if (page.currPage == 1 && (!this.myCoupons || this.storeList.length <= 0) && (list && list.length > 0)) {
                            this.storeList = list
                            this.finished = true;
                            this.$nextTick(() => {
                                this._suiteImgWrapper()
                            })
                            return
                        } else if (page.totalPage == page.currPage && page.currPage > 1) {
                            this.storeList = this.storeList.concat(list)
                            this.finished = true;
                            this.$nextTick(() => {
                                this._suiteImgWrapper()
                            })
                            return
                        } else if (page.currPage == this.pageNo) {
                            this.finished = true;
                            return
                        } else {
                            this.storeList = this.storeList.concat(list)
                            this.pageNo++
                        }
                    }
                }).catch(error => {
                    console.log("storeList error: ", error)
                })
            },
            fetchFloorOptions() {
                this.$api.dict.dictByType({type: 'marketFloor'}).then(res => {
                    //console.log("marketFloor",res.data)
                    this.floorOptions = res.data
                }).catch(error => {
                })
            },
            fetchYetaiOptions() {
                this.$api.dict.dictByType({type: 'businessType'}).then(res => {
                    //console.log("businessType",res.data)
                    this.yetaiOptions = res.data
                }).catch(error => {
                })
            },
            fetchBySearcheName() {
                this.pageNo = 1
                this.fetchStoreList();
            },
            changeSelectType(type) {
                if (this.beenSelectItemsType && this.beenSelectItemsType === type) {
                    this.showSelectPanel = !this.showSelectPanel;
                    return
                }
                this.beenSelectItemsType = type
                this.selectItemType = type
                this.showSelectPanel = true
            },
            selectOptions(value, selectItemType) {
                if (selectItemType == 'yetai') {
                    this.floor = ''
                    this.categoryCode = value != -999 ? value : ''
                    this.pageNo = 1
                }
                if (selectItemType == 'floor') {
                    this.floor = value != -999 ? value : ''
                    this.categoryCode = ''
                    this.pageNo = 1
                }
                this.showSelectPanel = false
                window.setTimeout(() => {
                    this.fetchStoreList()
                }, 500)
            },
            openStoreDetail(storeDetail) {
                console.log("openStoreDetail", storeDetail);
                this.$store.commit("SET_STORE_DETAIL", storeDetail);
                this.$router.push("/store_detail")
            },
            onLoad() {
                this.fetchStoreList()
            },
            showAD() {
                this.$api.advert.advertList({field: 'isShow', value: '显示', type: '商家-轮播广告'}).then(res => {
                    if (res.code == 0) {
                        var data = JSON.parse(res.data)
                        var success = data.success
                        var adverJsonList = data.adverJsonList
                        this.swipeImgUrls = adverJsonList
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            _suiteImgWrapper() {
                if (this.$refs.imgWrapper && this.$refs.imgWrapper.length > 0) {
                    let _width = this.$refs.imgWrapper[0].clientWidth
                    this.$refs.imgWrapper.forEach(item => {
                        item.style.height = _width * 9 / 16 + 'px'
                    })
                }
            }
        },
    }
</script>

<style lang="less" scoped>
    @import "../../assets/less/base";

    .store {
        min-height: 100%;
        background-color: @main-background-color;
        .search-wrapper {
        }
        .select-wrapper {
            position: relative;
            border: 1px solid #eee;
            /*box-sizing: border-box;*/
            padding: 10px 0;
            .text-wrapper {
                color: @front-font-color;
                text-align: center;
                span {
                    display: inline-block;
                    height: 20px;
                    line-height: 20px;
                    font-size: 14px;
                    .icon-wrapper {
                        display: inline-block;
                        height: 20px;
                        line-height: 20px;
                        font-size: 14px;
                        vertical-align: top;
                    }
                }

            }
        }

        .select-panel {
            position: absolute;
            top: 42px;
            background-color: #eee;
            float: left;
            width: 100%;
            .option-wrapper {
                ul > li {
                    color: #7697b3;
                    padding-left: 10px;
                    margin: 10px 0;
                }
            }
        }
        .store-list-wrapper {
            .store-list {
                padding: 0 10px;
                display: flex;
                flex-flow: row wrap;
                flex-grow: 1;
                justify-content: space-between;
                .store-item {
                    flex: 0 0 48%;
                    width: 50%;
                    border: 1px solid #e3e3e3;
                    border-radius: 5px;
                    margin-top: 10px;
                    box-sizing: border-box;
                    .img-wrapper {
                        /*height: 170px;*/
                        overflow-y: hidden;
                        .store-pics {
                            display: block;
                            border-radius: 5px;
                            width: 100%;
                        }
                    }
                    .info {
                        padding: 5px 0 0px 3px;
                        color: @front-font-color;
                        .logo {
                            display: inline-block;
                            width: 20px;
                            height: 20px;
                            border-radius: 50%;
                            vertical-align: top;
                        }
                        .store-name {
                            display: inline-block;
                            .fz();
                            width: 100%;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                        .floor-station {
                            padding-top: 5px;
                            margin-left: 5px;
                            .fz(14px)
                        }
                    }
                }
            }
        }
    }
</style>
